import { Image } from '@tarojs/components'
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { useDispatch, useSelector } from 'react-redux'
import { getUserInfoService } from '@/api/user'
import { UserState } from '@/reducers/user'
import { SET_USER } from '@/constants'
import Styles from './index.module.scss'

export default function User() {
  const dispatch = useDispatch()
  //登陆状态
  const [isLogin, setIsLogin] = useState(false)
  //获取仓库token信息
  const token = useSelector((state: any) => state.user.token)
  //const amount = useSelector((state: any) => state.user.amount)
  //获取用户信息函数
  const getUserInfo = async () => {
    try {
      const res = await getUserInfoService()
      if (res.code === 0) {
        if (res.data.phone === null) {
          res.data.phone = '未绑定'
        }
        if (res.data.realName === null) {
          res.data.realName = '未绑定'
        }
        dispatch({
          type: SET_USER,
          payload: {
            avatar: res.data.avatar,
            nickname: res.data.nickName,
            amount: res.data.amount,
            phone: res.data.phone,
            realName: res.data.realName,
            sex: res.data.sex,
          },
        })
        console.log('打印个人信息请求信息：', res)
        console.log('打印保存好的仓库信息', user)
      }
      //存获取的数据入仓库
    } catch (err) {
      console.log(err)
    }
  }
  //进入页面使用仓库默认数据，当token更改，更新仓库数据
  //获取仓库用户全部信息，当token更新时候获取用户信息，存入仓库
  const user: UserState = useSelector((state: any) => state.user)
  //刚登录，获取一次用户信息
  useEffect(() => {
    if (token) {
      setIsLogin(true) //控制展示的信息
      getUserInfo()
    } else {
      setIsLogin(false)
    }
    console.log('打印仓库信息', user)
  }, [token])

  const handleEnterMyOrderPage = () => {
    // 跳转到目的页面，打开新页面
    if (!token) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
      })
    } else {
      Taro.navigateTo({
        url: '/moduleA/pages/myOrder/index',
      })
    }
  }

  const handleEnterMyCollectPage = () => {
    // 跳转到目的页面，打开新页面
    if (!token) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
      })
    } else {
      Taro.navigateTo({
        url: '/pages/collect/index',
      })
    }
  }

  const handleLoginPage = () => {
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/login/index',
    })
  }
  const handleEditUserPage = () => {
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/editUser/index',
    })
  }

  return (
    <div className={Styles.user}>
      <div className={Styles.userCard}>
        <div className={Styles.left}>
          <Image
            style='width: 62px;height: 62px;background: #fff;borderRadius: 50%;'
            src={user.avatar}
          />
        </div>
        {isLogin && (
          <div className={Styles.middle}>
            <div className={Styles.userName}>{user.nickname}</div>
            <div className={Styles.money}>余额：{user.amount}</div>
          </div>
        )}
        {!isLogin && (
          <div className={Styles.middle} onClick={handleLoginPage}>
            <div className={Styles.userName}>立即登录</div>
            <div className={Styles.money}>开启我的购物之旅</div>
          </div>
        )}
        {isLogin && (
          <div className={Styles.right}>
            <div className={Styles.userIcon} onClick={handleEditUserPage}>
              <img
                src={require('../../../src/assets/user/user.png')}
                alt=''
                className={Styles.img_icon}
              />
            </div>
          </div>
        )}
      </div>

      <div className={Styles.userAbout}>
        <div className={Styles.box} onClick={handleEnterMyOrderPage}>
          <div className={Styles.button}>
            <div className={Styles.icon}>
              <img
                src={require('../../../src/assets/user/pay.png')}
                alt=''
                className={Styles.img_icon}
              />
            </div>
            <div className={Styles.title}>我的订单</div>
          </div>
        </div>
        <div className={Styles.box} onClick={handleEnterMyCollectPage}>
          <div className={Styles.button}>
            <div className={Styles.icon}>
              <img
                src={require('../../../src/assets/user/collect.png')}
                alt=''
                className={Styles.img_icon}
              />
            </div>
            <div className={Styles.title}>我的收藏</div>
          </div>
        </div>
      </div>
    </div>
  )
}
